iView - Carousel

一套基於 Vue.js 的高質量UI 組件庫，此篇介紹Carousel(跑馬燈)

Github

iview/iview

範例

設定autoplay後可自動從指定的該筆(value值)開始以autoplay-speed指定的毫秒輪播。
loop表示開啟循環。

HTML

<carousel autoplay loop autoplay-speed="2000" v-model="current">
    <carousel-item v-for="item in starwars">
        <div class="card" >
            <div class="card-body"><h3>{{ item.name }}</h3></div>
            <img class="card-img-bottom" :src="item.img" style="width:100%;height:100%">
        </div>
    </carousel-item>
</carousel>

JS

const FOO_DATA = [
    {name:'Luke Skywalker',gender:'male', img:'https://goo.gl/KEUxHN'},
    //...
];


var app = new Vue({
    el: "#app",
    data: {
        current: 0,
        starwars:[]
    },
    methods: {
    },
    created() {
        this.starwars = FOO_DATA;
    }
})

Demo

其他設置

例如以下HTML：

<carousel loop dots="outside" trigger="hover" arrow="always" easing="ease" v-model="current" >
    <carousel-item v-for="item in starwars">
        <div class="card" >
            <div class="card-body"><h3>{{ item.name }}</h3></div>
            <img class="card-img-bottom" :src="item.img" style="width:100%;height:100%">
        </div>
    </carousel-item>
</carousel>

結果如下：

其他API可參考：Props及Events